<template>
    <div style="z-index: 9999;overflow: hidden;" v-if="status">
      <!-- 蒙版 -->
      <view v-if="mask" class="position-fixed top-0 left-0 right-0 bottom-0 z-index" :style="getMaskColor" @click="hide"></view>
      <!-- 弹出框内容 -->
    <div ref="popup" class="position-fixed z-index" :class="getBodyClass" :style="getBodyStyle">
      <slot></slot>
    </div>
    </div>
</template>

<script>
  // const animation = weex.requireModule('animation')
  export default {
    props: {
      // 蒙版颜色是否开启
      maskColor: {
        type: Boolean,
        default: false
      },
      // 是否开启蒙版
      mask: {
        type: Boolean,
        default: true
      },
      // 是否处于底部
      fixedBottom: {
        type: Boolean,
        default: false
      },
      // 弹出层内容宽度
      bodyWidth: {
        type: Number,
        default: 0
      },
      // 弹出层内容高度
      bodyHeight: {
        type: Number,
        default: 0
      },
      bodyBgColor: {
        type: String,
        default: 'bg-white'
      },
      // tabbar的高度，因为弹层会覆盖掉输入框
      tabbarHeight: {
        type: Number,
        default: 0
      },
      transformOrigin: {
        type: String,
        default: "left top"
      },
      // 是否居中
      center: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        status: false,
        x: -1,
        y: 1,
        maxX: 0,
        maxY: 0
      }
    },
    methods: {
      show(x = -1, y = -1) {
        if (this.status) {
        	return;
        }
        this.x = x > this.maxX ? this.maxX : x
        this.y = y > this.maxY ? this.maxY : y
        this.status = true
        // this.$nextTick(() => {
        //   animation.transition(this.$refs.popup, {
        //       styles: {
        //           transform: 'scale(1, 1)',
        //           transformOrigin: 'left top',
        //           opacity: 1
        //       },
        //       duration: 100, //ms
        //       timingFunction: 'ease',
        //       }, function () {
        //           console.log('动画执行结束')
        //       })
        // })
      },
      hide() {
        this.$emit('hide')
        this.status = false
      }
    },
    mounted() {
      try {
        const res = uni.getSystemInfoSync()
        // console.log(res)
        this.maxX = res.windowWidth - uni.upx2px(this.bodyWidth)
        this.maxY = res.windowHeight - uni.upx2px(this.bodyHeight) - uni.upx2px(this.tabbarHeight)
      } catch(e) {
        // error
      }
    },
    computed: {
      getMaskColor() {
        let i = this.maskColor ? 0.2 : 0
        return `background-color: rgba(0,0,0,${i});` 
        // return 'background-color: rgba(0,0,0,0.6)'
      },
      getBodyClass() {
        if (this.center) {
          return 'left-0 right-0 bottom-0 top-0 flex align-center justify-center'
        }
        let fixedBottom = this.fixedBottom ? 'left-0 right-0 bottom-0' : 'rounded border'
        return `${this.bodyBgColor} ${fixedBottom}`
      },
      getBodyStyle() {
        let left = this.x > -1 ? `left:${this.x}px;` : ''
        let top = this.y > -1 ? `top:${this.y}px;` : ''
        return left + top
      }
    }
  }
</script>

<style scoped>
  .free-animated {
    /* #ifdef APP-PLUS-NVUE */
    transform: scale(0, 0);
    opacity: 0;
    /* #endif */
  }
  .z-index {
    z-index: 999;
  }
</style>
